<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

<!--      <div class="search-ctrl f-l" >
        <form style="height: 100%;">
          <input placeholder="根据WIFI探针设备号" @keyup="defaultLoad($event)" v-model="tableRowParams.num" class="search-text">
          <button class="search-btn btn btn-default more-btn" @click="searchMoreShowFn" type="button">更多条件</button>
          <button class="search-btn btn btn-info" @click="searchDotResource" type="button">搜索</button>
          <transition
            name="custom-classes-transition"
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutDown"
          >
            <div class="search-more-body" v-show="searchMoreIsShow">
              <input placeholder="根据WIFI名称" v-model="tableRowParams.name" class="search-text">
              <input placeholder="根据WIFI地址" v-model="tableRowParams.address" class="search-text">

              <input placeholder="根据部门查询" v-model="searchMoreSectionName" @click="getSectionTreeFn" readonly="readonly" class="search-text">
              <input type="hidden" v-model="tableRowParams.stationid" class="search-text">
              <div class="sectionTree" v-show="sectionTreeIShow">
                <div id="sectionSearchTree" class="ztree sectionTree-box"></div>
              </div>
              <button type="button" class="btn btn-info" @click="clearSearch">重置条件</button>
              &lt;!&ndash;  <input placeholder="根据WIFI类型编码" v-model="tableRowParams.code" class="search-text">&ndash;&gt;
            </div>
          </transition>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
        <button type="button" class="btn btn-success" @click="isDetailsModalFn">详情</button>
        <button type="button" class="btn btn-info" @click="bindKeyParts">添加重点部位关系</button>
        <button type="button" class="btn btn-danger" @click="DeleteBindKeyParts">删除重点部位关系</button>
        <button type="button" class="btn btn-info" @click="pushModal">导入</button>
        <!--   <button type="button" class="btn btn-info">添加重点人关系</button>
           <button type="button" class="btn btn-danger">删除重点人关系</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.data"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader" :title="[trs,tds.key] | isOnline">
              {{ [trs,tds.key] | isOnline }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.elementsSum !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRow.elementsSum"
        :allpage="(Math.ceil(tableRow.elementsSum/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增-->
    <AddWifiModal
      @ModalClose="toggleAddModal"
      :AddModalObj="AddModalObj"
    ></AddWifiModal>

    <!--修改-->
    <RevampWifiModal
      :RevampModalObj="RevampModalObj"
      :selectRow="selectRowId"
      :isDetailsModal="isDetailsModal"
      @RevampModalClose="toggleRevampModal"
    ></RevampWifiModal>

    <!--重点部位关系-->
    <KeyParts
      :KeyParts="KeyParts"
      @keyPartsClose="keyPartsCloseFn"
    ></KeyParts>

    <!--导入-->
    <BulkImport
      :bulkImportObj="bulkImportObj"
      @upModalClose="upModalCloseFn"
    ></BulkImport>
  </div>
</template>

<script>
    import Pages from "../../sudoku/atom/pages.vue"
    import KeyParts from "../../publicTemplate/keyPartsModal/KeyParts"
    import AddWifiModal from "./AddWifiModal"
    import RevampWifiModal from "./RevampWifiModal"
    import BulkImport from "../../publicTemplate/bulkImport/BulkImport"
    import SearchPublic from "../../publicTemplate/search/SearchPublic"
    export default {
        name: "WifiTable",
        data(){
          return{
            isActive:-1,
            selectRowId:"",
            tableHeader:[
              {"key":"num","value":"设备号"},
              {"key":"address","value":"地址"},
              {"key":"ipAddress","value":"IP地址"},
              {"key":"name","value":"名称"},
              {"key":"stationName","value":"所属机构"},
              {"key":"resourceTypeCode","value":"类型"},
              {"key":"maintenanceUnit","value":"维护单位"},
              {"key":"maintenanceUnitTel","value":"维护电话"},
            ],
            tableRow:[],
            tableRowParams : {
              pageIndex:"1", //当前页
              pageSize:"20", //数量
              num:"", //设备编号
              name:"", //设备名称
              stationid:"",//部门搜索
              address:"",//地址
              ipAddress:"",//IP地址
            },
            AddModalObj:{
              isShow:false
            },
            RevampModalObj:{
              isShow:false
            },
            searchDotNum:"", //搜索设备号
            isDetailsModal:false, //是否为查看界面
            stationAll:[],
            KeyParts:{
              isShow:false,
              selectId:"",
              type:"",
              typeAjax:{
                add:"/resource/wifiIMRelation/addTResWifiIMRelation/",
                get:"/resource/wifiIMRelation/getTResWifiIMRelation/"
              }
            },//重点部位关系对象
            searchMoreIsShow:false,
            sectionTreeIShow:false,
            searchMoreSectionName:"",
            settingSearchMore : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            bulkImportObj:{
              title:"导入WIFI信息",
              isShow:false,
              TemplateUrl:"/resource/wifiCRUD/upExcel/template",
              upUrl:"/resource/wifiCRUD/upExcel",
              urlType:"dot"
            },
            searchObj:{
              condition:[
                {"title":"名称","key":"name",'type':'text',"value":''},
                {"title":"地址","key":"address",'type':'text',"value":''},
                {"title":"IP地址","key":"ipAddress",'type':'text',"value":''},
                {"title":"所属单位","key":"stationid","value":'','type':'treeSection','data':''},
              ],
              htmlType:"searchDefaultPublic",
            },
          }
        },
        components:{
          Pages,
          AddWifiModal,
          RevampWifiModal,
          KeyParts,
          BulkImport,
          SearchPublic
        },
        mounted(){
          this.getStation();
          //this.tableRowAjax();
        },
        methods:{
          //加载所有部门和刷新表格，匹配部门信息
          getStation(){
            //GET /station/getOrgaInfo
            this.$axios.get(this.HOST+"/station/getOrgaInfo")
              .then((data)=>{
                //console.log(data);
                this.stationAll = data.data.data;
                this.searchObj.condition[3].data = data.data.data;
                //初始化表格
                this.tableRowAjax();
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //加载表格
          tableRowAjax(){
            //清除选择
            this.clearSelect();
            this.$axios.get(this.DotCtrl+"/resource/wifiCRUD/v2",{
              params:this.tableRowParams
            })
              .then((data)=>{
                //console.log(data);
                let successData = data.data;
                for( let i=0;i<successData.data.length;i++ ){
                  for( let k=0;k<this.stationAll.length;k++ ){
                    if( successData.data[i].stationid === this.stationAll[k].id ){
                      successData.data[i].stationName = this.stationAll[k].name;
                      break;
                    }else{
                      successData.data[i].stationName = "";
                    }
                  }
                }
                this.tableRow = successData;
                ////console.log(successData.data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //翻页加载
          tablePageData(page){
            this.tableRowParams.pageIndex = page;
            this.getStation();
            ////console.log(page);
          },
          //新增弹窗显示与隐藏
          toggleAddModal(){
            this.AddModalObj.isShow = !this.AddModalObj.isShow;
            if( this.AddModalObj.isShow === false ){
              //重新加载表格
              this.getStation();
            }
          },
          //修改弹窗显示与隐藏
          toggleRevampModal(){
            //console.log(this.selectRowId);
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = false;

            }else{
              this.s_alert("请选择需要修改的摄像头！");
            }

            if( this.RevampModalObj.isShow === false ){
              //重新加载表格
              this.getStation();
            }
          },
          //搜索功能
          searchDotResource(){
            this.getStation();
          },
          //选择行
          selectRow(obj,index){
            //console.log(obj);
            this.selectRowId = obj.id;
            this.isActive = index;
            this.KeyParts.selectId = obj.id;
          },
          //查看详情
          isDetailsModalFn(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = true;
            }else{
              this.s_alert("请选择需要查看的摄像头！");
            }
          },
          //更多查询根据部门
          getSectionTreeFn(){
            //settingSearchMore
            let _this = this;
            this.settingSearchMore.callback = {
              onClick:function(event,treeId,treeNode){ //新增警员部门树选择
                //console.log(treeNode);
                _this.tableRowParams.stationid = treeNode.id;
                _this.searchMoreSectionName = treeNode.name;
                _this.sectionTreeIShow = !_this.sectionTreeIShow;
              }
            };
            this.$axios.get(this.HOST+'/station/getOrgaInfo')
              .then((data)=>{
                $.fn.zTree.init($("#sectionSearchTree"), this.settingSearchMore, data.data.data);
                this.sectionTreeIShow = !this.sectionTreeIShow;
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //默认加载
          defaultLoad(ev){
            if( ev.keyCode === 8 ){
              if( this.tableRowParams.num === "" ){
                this.searchDotResource();
              }
            }
          },
          //导入用户模板
          pushModal(){
            this.bulkImportObj.isShow = true;
          },
          upModalCloseFn(){
            this.bulkImportObj.isShow = false;
          },
          //删除
          deleteFn(){
            if( this.selectRowId !=="" ){
              let msg = confirm("请问是否删除该wifi？");
              if( msg ){
                this.$axios.delete(this.DotCtrl+"/resource/wifiCRUD/deleteWifi/"+this.selectRowId)
                  .then((data)=>{
                    //console.log(data);
                    this.s_alert("删除成功！");
                    this.s_logwrite("资源信息管理-WIFI管理","删除WIFI");
                    this.getStation();
                  })
                  .catch((err)=>{
                    this.s_alert("删除失败！");
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的WIFI！");
            }
          },
          //绑定重点部位
          bindKeyParts(){
            //GET /resource/placeInfoCRUD/queryAllIM
            if( this.KeyParts.selectId !== "" ){
              this.KeyParts.isShow = !this.KeyParts.isShow;
            }else {
              this.s_alert("请选择需要添加重点部位关系的WIFI！");
            }
            //this.KeyParts.type = type;
          },
          //删除重点人关系
          DeleteBindKeyParts(){
            if( this.KeyParts.selectId !== "" ){
              let msg = confirm("请问是否删除该WIFI的重点部位关系？");
              if( msg ){
                this.$axios.delete(this.DotCtrl+"/resource/relation/deleteTResPlaceIMRelation/"+this.KeyParts.selectId)
                  .then(data=>{
                    //console.log(data);
                    this.s_alert("删除成功！");
                    this.clearSelect();
                    this.KeyParts.selectId = "";
                  })
                  .catch(err=>{
                    //this.s_alert("删除失败！");
                    this.s_alert("删除失败！" + err.response.data.errorMsg);
                    //console.log(err);
                  })
              }
            }else {
              this.s_alert("请选择需要删除重点部位关系的WIFI！");
            }
          },
          //清除选择
          clearSelect(){
            this.isActive=-1;
            this.selectRowId="";
            this.KeyParts.selectId = "";
          },
          //关闭重点部位弹窗
          keyPartsCloseFn(){
            this.KeyParts.isShow = !this.KeyParts.isShow;
          },
          //更多搜索
          searchMoreShowFn(){
            this.searchMoreIsShow = !this.searchMoreIsShow;
          },
          //搜索
          searchParamsFn(searchParams){
            //console.log(this.searchObj.condition);
            for( let i=0;i<this.searchObj.condition.length;i++ ){
              for( let paramsKey in this.tableRowParams ){
                if( this.searchObj.condition[i].key === paramsKey ){
                  this.tableRowParams[paramsKey] = this.searchObj.condition[i].value
                }
              }
            }
            //console.log(this.params);
            this.tableRowAjax();
          },
          //搜索重置
          clearSearch(){
            this.tableRowParams.name = "";
            this.tableRowParams.num = "";
            this.tableRowParams.stationid = "";
            this.tableRowParams.address = "";
            this.searchMoreSectionName = "";
          }
        }
    }
</script>

<style scoped>
  .fadeInUp,.fadeOutDown{
    animation-duration: .500s;
  }
</style>
